this

在 JavaScript 裡，this 指向 window，在 function 中， this 指向呼叫它的地方。
例如：

// Window
window.name = "Amy";
console.log(this.name); // Amy
console.log(this); // Window Object
// Object
let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.sayAge(); // I am 24 years old.

在 sayAge() 裡面的 this 取決於呼叫它的地方，sayAge() 是在 Helen 這個 object 裡被定義的，所以 this 就代表這個 object，this.age 就會是 24。
this 也能改變物件的值，例如：

let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.age = 25;
Helen.sayAge(); // I am 25 years old.

Arrow Function Expression

箭頭函式語法簡單，和傳統函式比，可以少打很多字，也讓程式碼較好閱讀，在箭頭函式中，沒有自己的 this，所以箭頭函式中的 this 永遠指向函式被定義時所在的作用域中的 this 值。
過去我們寫函式的方式如下：

function sayHi(){
    console.log("Hi");
}
sayHi(); // Hi

將上面例子改成箭頭函式：

const sayHi = () => {
    console.log("Hi")
}
sayHi(); // Hi

• 如果函式有回傳值，要加上 return，且如果沒有參數，就一定要加括號，例如：

const sayHi = () => {
  return "Hi";
}
sayHi(); // Hi

上面的例子也可以簡化成下面這樣：

• 省略 return 及 {}，因為當沒有 {} 時，會自帶 return

const sayHi = () => "Hi";
sayHi(); // Hi

• 如果函式只有一個參數時，() 可以省略
  原始程式碼：

let count = (x) => {
    console.log(x + 1)
}
count(3); // 4

參數省略 () 後：

let count = x => {
    console.log(x + 1)
}
count(3); // 4

• 箭頭函式如果在定義 function 前就先執行會出錯

sayHi("Gina");
let sayHi = (name) => {
    console.log("Hi" + name)
}

執行上面的程式碼，會得到 Uncaught RefernceError 不能在定義前執行的錯誤提示

Bind,Call and Apply

下面的程式碼因為 this 指向 window，會回傳 undefined，這時我們就可以使用 bind,call or apply

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this.age); // undefined
}
getPerson();

• bind
  使用 bind 時會回傳新的 function，所以需要用一個變數接住

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson();
// Window Object
// undefined

// 使用 bind 綁定
let newfn = getPerson.bind(Helen);
newfn();
// {name:"Helen",age:24,}
// 24

• call
  不會產生新的 function，可以直接使用

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson.call(Helen);
// {name:"Helen",age:24,}
// 24

如果 function 內有參數，則直接在括號後面加上去

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.call(Helen,"Taiwan","Female");
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female

• apply
  和 call 非常類似，差別在於 apply 的參數要放在陣列裡

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.apply(Helen,["Taiwan","Female"]);
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female